<template>
	<view>
		<button type="primary" @click="toggle('top')">顶部弹出</button>
		<button type="primary" @click="toggle('center')">居中弹出</button>
		<button type="primary" @click="toggle('bottom')">底部弹出</button>
		<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change">
			<view style="background-color: #fff;padding: 15px;">
				popup 内容，此示例没有动画效果
			</view>
		</uni-popup>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			type: 'top'
		};
	},
	methods: {
		toggle(type) {
			this.type = type;
			this.$refs['popup'].open();
		},
		change(e) {
			uni.showToast({
				title:'popup: ' + e.type + ' ,状态:'+e.show
			})
		}
	}
};
</script>